<div class="row">
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Alerts</h3>
            </div>
            <div class="box-body">
                <div ng-controller="SandboxBootstrapAlertCtrl">
                    <alert ng-repeat="alert in alerts" type="{{alert.type}}" close="closeAlert($index)">{{alert.msg}}
                    </alert>
                    <button class='btn btn-default' ng-click="addAlert()">Add Alert</button>
                </div>
            </div>
        </div>
    </div>
    <div class="col-md-6">
        <div class="box box-primary">
            <div class="box-header">
                <h3 class="box-title">Tabs</h3>
            </div>
            <div class="box-body">
                <div ng-controller="SandboxBootstrapTabsCtrl">
                    <p>Select a tab by setting active binding to true:</p>
                    <p>
                        <button class="btn btn-default btn-sm" ng-click="tabs[0].active = true">Select second tab</button>
                        <button class="btn btn-default btn-sm" ng-click="tabs[1].active = true">Select third tab</button>
                    </p>
                    <p>
                        <button class="btn btn-default btn-sm" ng-click="tabs[1].disabled = ! tabs[1].disabled">Enable /
                            Disable third tab
                        </button>
                    </p>
                    <hr/>
                    <tabset>
                        <tab heading="Static title">Static content</tab>
                        <tab ng-repeat="tab in tabs" heading="{{tab.title}}" active="tab.active"
                             disabled="tab.disabled">
                            {{tab.content}}
                        </tab>
                        <tab select="alertMe()">
                            <tab-heading>
                                <i class="glyphicon glyphicon-bell"></i> Alert!
                            </tab-heading>
                            I've got an HTML heading, and a select callback. Pretty cool!
                        </tab>
                    </tabset>
                    <hr/>
                    <tabset vertical="true" type="pills">
                        <tab heading="Vertical 1">Vertical content 1</tab>
                        <tab heading="Vertical 2">Vertical content 2</tab>
                    </tabset>
                    <hr/>
                    <tabset justified="true">
                        <tab heading="Justified">Justified content</tab>
                        <tab heading="SJ">Short Labeled Justified content</tab>
                        <tab heading="Long Justified">Long Labeled Justified content</tab>
                    </tabset>
                </div>
            </div>
        </div>
    </div>
</div>
